<template>
	<view class="list-item rounded-box">
		<view class="header">
			<view class="user-info">
				<image :src="localData.avatar" class="avatar" mode="aspectFill" />
				<text class="name">{{ localData.name }}</text>
			</view>
			<text class="reply-button" @click="handleReply">回复TA</text>
		</view>
		<view class="content" @click="navigateToList">
			{{ localData.content }}
		</view>
	</view>
</template>

<script>
	import {
		indexAsk
	} from '@/api/system/ask';

	export default {
		props: {
			avatar: {
				type: String,
				required: true
			},
			name: {
				type: String,
				required: true
			},
			id: {
				type: Number,
				required: true
			},
			user_id: {
				type: Number,
				required: true
			},
			content: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				localData: {
					avatar: this.avatar,
					name: this.name,
					id: this.id,
					user_id: this.user_id,
					content: this.content
				},
				dataObj: {}
			};
		},
		mounted() {
			this.getAsk();
		},
		methods: {
			handleReply() {
				const obj = {
					id: this.localData.id,
					content: this.localData.content,
					user_id: this.localData.user_id,
					name: this.localData.name,
					avatar: this.localData.avatar
				};
				this.$emit('handleReply', obj);
			},
			navigateToList() {
				console.log("原始组件 跳转"+this.localData.id);
				const url='/pages/answer/list?ask_id='+this.localData.id;
				this.$tab.redirectTo(url);
				//this.$emit('navigateToList', this.localData.id);
			},
			getAsk() {
				console.log('调用了 首页的问答');
				indexAsk().then(res => {
					const data = res.data;
					if (data.nickName) {
						this.localData.name = data.nickName;
						this.localData.avatar = data.avatar || '/static/images/profile.png';
						this.localData.content = data.title;
						this.localData.id = data.id;
						this.localData.user_id = data.userId;
						this.dataObj = data; // 保存获取到的数据
					}
					console.log('调用了 首页的问答');
					console.log(res);
				});
			}
		},
		watch: {
			avatar(newVal) {
				this.localData.avatar = newVal;
			},
			name(newVal) {
				this.localData.name = newVal;
			},
			id(newVal) {
				this.localData.id = newVal;
			},
			content(newVal) {
				this.localData.content = newVal;
			}
		}
	};
</script>

<style scoped>
	.list-item {
		background-color: #f0f0f0;
		border-radius: 12px;
		padding: 12px;
		margin-bottom: 0px;
		width: 100%;
		min-height: 150px;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		margin-right: 8px;
	}

	.name {
		font-weight: bold;
	}

	.reply-button {
		color: orangered;
		cursor: pointer;
		text-decoration: underline;
		font-size: 14px;
	}

	.content {
		line-height: 1.2;
		margin-top: 10px;
	}
</style>